<template>
  <div class="wrap">
    <div class="card">
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
        status-icon
      >
        <el-form-item label="account" prop="account">
          <el-input v-model="form.account" />
        </el-form-item>
        <el-form-item label="password" prop="password">
          <el-input
            v-model="form.password"
            type="password"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit(formRef)"
            >Login</el-button
          >
        </el-form-item>
      </el-form>
      <div class="foot">
        <el-button type="primary" link @click="toRegis">to Register</el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref } from "@vue/runtime-core";
import useCurrentInstance from "@/hooks/useCurrentInstance";
import { ElMessage } from "element-plus";
import router from "@/router";

const { globalProperties } = useCurrentInstance();
const formRef = ref();

const form = reactive({
  account: "admin",
  password: "qwer1234",
});

const rules = reactive({
  account: [
    { required: true, message: "Please input account", trigger: "blur" },
  ],
  password: [
    { required: true, message: "Please input password", trigger: "blur" },
  ],
});

const submit = (formEl) => {
  if (!formEl) return;
  formEl.validate(async (valid) => {
    if (valid) {
      let { data } = await globalProperties?.$api["login"]({ ...form });
      if (data.code == 0) {
        ElMessage.success("login successfully!");
        // 存储cookie
        router.replace('/home/hero')
      } else {
        ElMessage.error(data.message);
      }
    }
  });
};

const toRegis = function() {
    router.replace('/register')
}
</script>

<style lang="less" scoped>
.wrap {
  width: 100vw;
  height: 100vh;
  background-color: rgb(201, 195, 207);

  .card {
    width: 500px;
    box-sizing: border-box;
    box-shadow: 0 1px 12px 5px rgba(175, 177, 187, 0.5);
    border-radius: 24px;
    padding: 40px;
    background-color: #fff;
    position: fixed;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);

    .foot {
        text-align: right;
    }
  }
}
</style>